<template>
    <view class="page_root" data-page-name="考试" data-page-identification="f_vauuv3n5t0">
      <!-- UNI_APP_EXEGESIS_START NAVIGATION_TEMPLATE UNI_APP_EXEGESIS_END -->
      <!-- begin vid_3v8qyxf52i 自定义模板_f8ubxtpyu8 -->
      <u-mask :show="taskState.loadingShow" @click="show = false">
        <view style="height: 100px; width: 100px;position: absolute; top: 50%; left: 50%;transform: translate(-50%, -50%);">
          <u-loading :color="'red'" mode="semicircle" textSize="50" :show="taskState.loadingShow" size="100"></u-loading>
          <view v-if="taskState.loadingShow" style="color: #fff;">正在交卷....</view>
        </view>
      </u-mask>
      <view class="main">
        <view class="bgc-img"></view>
        <view class="top-tip">
          <view class="top-icon"><u-icon name="info-circle-fill" color="#F7B500" size="24px"></u-icon></view>
          <view class="top-content"> 考试不合格将扣除个人最终绩效分数 </view>
        </view>
        <view class="main-content">
          <view class="question-bottom-inner">
            <view class="question-item" v-for="(finishQ, finishQindex) in taskState.finishQList" :key="finishQindex">
              <view class="question-title"> 题目来源 </view>
              <view class="question-content"> 完成标准 </view>
              <view class="question-title"> 题目 </view>
              <view class="question-content">
                <view v-html="formatText(finishQ.examQuestion)"></view>
                <u-radio-group
                  wrap
                  v-model="taskState.questionRef[
              `finishQ${String(finishQ.questionId)
              }`
          ]"
                >
                  <u-radio v-for="(item, index) in finishQ.examOption.split(/[;,]/).filter(item => item.trim() !== '')" :name="item.charAt(0)" :key="index">
                    {{ item }}
                  </u-radio>
                </u-radio-group>
              </view>
            </view>
            <view class="question-item" v-for="(sopQ, sopQindex) in taskState.sopQList" :key="finishQindex">
              <view class="question-title"> 题目来源 </view>
              <view class="question-content"> SOP </view>
              <view class="question-title"> 题目 </view>
              <view class="question-content">
                <view v-html="formatText(sopQ.examQuestion)"></view>
                <u-radio-group
                  wrap
                  v-model="taskState.questionRef[
              `sopQ${String(sopQ.questionId)
              }`
          ]"
                >
                  <u-radio v-for="(item, index) in sopQ.examOption.split(/[;,]/).filter(item => item.trim() !== '')" :name="item.charAt(0)" :key="index">
                    {{ item }}
                  </u-radio>
                </u-radio-group>
              </view>
            </view>
          </view>
        </view>
        <!-- <view class="main-content">
  
            <view class="question-item" v-for="(item, questionIndex) in taskState.questionList" :key="questionIndex" :class="{ show: questionIndex === taskState.current }">
              <view class="question-top-main">
                <span class="question-title">问题现象</span>
                <view class="h1-title top-text-15">现象发现方</view>
                <view class="h2-title">{{ item.discoveredBy }}</view>
                <view class="h1-title top-text-15">具体现象</view>
                <view class="h2-title">{{ item.phenomenon }}</view>
                <view class="h1-title top-text-15">导致结果</view>
                <view class="h2-title">{{ item.result }}</view>
                <view class="question-bottom top-text-15" v-for="(item, index) in item.reasonResolveSopList " :key="index">
                  <view class="question-bottom-inner">
                    <view class="question-bottom-title">可能原因</view>
                    <view class="h1-title top-text-8">原因发现方</view>
                    <view class="h2-title" v-html="formatText(item.reason.phenomenonReason)" />
                    <view v-if="item.reason.phenomenonReasonOptionList" class="question-option-body">
                      <u-radio-group wrap v-model="taskState.questionRef[`reason${index}phenomenonReason${questionIndex}`]">
                        <u-radio v-for="(item, index) in item.reason.phenomenonReasonOptionList" :name="item.charAt(0)" :key="index">
                          {{ item }}
                        </u-radio>
                      </u-radio-group>
                    </view>
                    <view class="h1-title top-text-8">可能原因</view>
                    <view class="h2-title" v-html="formatText(item.reason.possibleReason)"></view>
                    <view v-if="item.reason.possibleReasonOptionList" class="question-option-body">
                      <u-radio-group wrap v-model="taskState.questionRef[`reason${index}possibleReason${questionIndex}`]">
                        <u-radio v-for="(item, index) in item.reason.possibleReasonOptionList" :name="item.charAt(0)" :key="index">
                          {{ item }}
                        </u-radio>
                      </u-radio-group>
                    </view>
                    <view class="h1-title top-text-8">原因特征</view>
                    <view class="h2-title" v-html="formatText(item.reason.reasonFeature)"></view>
                    <view v-if="item.reason.reasonFeatureOptionList" class="question-option-body">
                      <u-radio-group wrap v-model="taskState.questionRef[`reason${index}reasonFeature${questionIndex}`]">
                        <u-radio v-for="(item, index) in item.reason.reasonFeatureOptionList" :name="item.charAt(0)" :key="index">
                          {{ item }}
                        </u-radio>
                      </u-radio-group>
                    </view>
                    <view class="question-bottom-title-bottom">解决SOP和标准动作</view>
                    <view class="h1-title top-text-8">执行目标</view>
                    <view class="h2-title" v-html="formatText(item.resolveSop.executionTarget)" />
                    <view v-if="item.resolveSop.executionTargetOptionList" class="question-option-body">
                      <u-radio-group wrap v-model="taskState.questionRef[`resolveSop${index}executionTarget${questionIndex}`]">
                        <u-radio v-for="(item, index) in item.resolveSop.executionTargetOptionList" :name="item.charAt(0)" :key="index">
                          {{ item }}
                        </u-radio>
                      </u-radio-group>
                    </view>
                    <view class="h1-title top-text-8">执行方案</view>
                    <view class="h2-title" v-html="formatText(item.resolveSop.plan)"></view>
                    <view v-if="item.resolveSop.planOptionList" class="question-option-body">
                      <u-radio-group wrap v-model="taskState.questionRef[`resolveSop${index}plan${questionIndex}`]">
                        <u-radio v-for="(item, index) in item.resolveSop.planOptionList" :name="item.charAt(0)" :key="index">
                          {{ item }}
                        </u-radio>
                      </u-radio-group>
                    </view>
                    <view class="h1-title top-text-8">达成标准</view>
                    <view class="h2-title" v-html="formatText(item.resolveSop.reachStandard)"></view>
                    <view v-if="item.resolveSop.reachStandardOptionList" class="question-option-body">
                      <u-radio-group wrap v-model="taskState.questionRef[`resolveSop${index}reachStandard${questionIndex}`]">
                        <u-radio v-for="(item, index) in item.resolveSop.reachStandardOptionList" :name="item.charAt(0)" :key="index">
                          {{ item }}
                        </u-radio>
                      </u-radio-group>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view> -->
  
        <view class="fixed-button" @click="handleSubmit(taskState.taskId)">
          <view class="btn-father">
            交卷
            <view class="btn-tip"
              ><span class="count">考试不通过{{ taskState.examFailNumber }}次</span></view
            >
          </view>
        </view>
      </view>
      <u-modal v-model="taskState.show" show-cancel-button @confirm="handleConfirmSubmit">
        <view class="sub-tip">
          <view class="sub-icon"><u-icon name="info-circle-fill" color="#F7B500" size="24px"></u-icon></view>
          <view class="sub-title"> 确认提交吗</view>
        </view>
      </u-modal>
      <!-- end vid_3v8qyxf52i 自定义模板_f8ubxtpyu8 -->
    </view>
  </template>
  <script setup>
  
    import {
      ref,reactive,toRaw,markRaw,
      watch,computed,
      onBeforeMount,onMounted,onBeforeUnmount,onUnmounted,onActivated,onDeactivated,getCurrentInstance
    } from "vue";
    import { useRoute } from 'vue-router';
    const route = useRoute();
    import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios';
    import { cloneDeep, localGet, traversalTreeStructure, set, checkCaseCondition, throttle, merge, debounce, getGridStyle, getCellRenderAble, formulaStrategy } from '@/utils/index';
    import { isEqual, isNullOrEmpty, isEmptyArr, isArray, isEmpty, isNullOrUnDef, isContained } from '@/utils/is';
    import { CovertOptions, getChartsDataSourceConvert } from '@/utils/chart';
    import { propertyFormatByNumber, propertyFormatByPercentage, propertyFormatByDate } from '@/utils/format';
    import { FormFormat } from '@/utils/formFormat'
    import { customAddWaterMarkFunc, generateWaterMarkText } from '@/utils/addWaterMark';
    import dayjs from 'dayjs';
    import hashSum from 'hash-sum';
    import { handleRedirect } from '@/utils/common';
    import { onPullDownRefresh, onLoad, onReady, onShow, onHide, onPageScroll, onUnload } from '@dcloudio/uni-app';
    /*** UNI_APP_EXEGESIS ***
    import { handleRedirect, permission, parseJson } from '@/utils/common';
    import { onPullDownRefresh, onLoad, onReady, onShow, onHide, onPageScroll, onUnload } from '@dcloudio/uni-app';
    import { BroadcastMessage } from '@/utils/BroadcastMessage';
    import { sendToken } from "@/hooks/useIframeToken";
    *** UNI_APP_EXEGESIS ***/
  
  
    // ---------------------------- 属性定义 ----------------------------
    const sourceId = "page3000000332"
  
      // 是否显示菜单按钮
      const isMenuIconShow = false;
      // NAVIGATION_MENU
      const handleShowNavigation = ()=>{};
  
      let isProcessState = ref(false);
  
  
    const setTimeOutList = [];
  
  
        const vid_3v8qyxf52i_props = reactive({
          code: "        <u-mask :show=\"taskState.loadingShow\" @click=\"show = false\">\n            <view\n                style=\"height: 100px; width: 100px;position: absolute; top: 50%; left: 50%;transform: translate(-50%, -50%);\">\n                <u-loading :color=\"'red'\" mode=\"semicircle\" textSize=\"50\" :show=\"taskState.loadingShow\"\n                    size=\"100\"></u-loading>\n                <view v-if=\"taskState.loadingShow\" style=\"color: #fff;\">正在交卷....</view>\n            </view>\n        </u-mask>\n        <view class=\"main\">\n            <view class=\"bgc-img\"></view>\n            <view class=\"top-tip\">\n                <view class=\"top-icon\"><u-icon name=\"info-circle-fill\" color=\"#F7B500\" size=\"24px\"></u-icon></view>\n                <view class=\"top-content\"> 考试不合格将扣除个人最终绩效分数 </view>\n            </view>\n            <view class=\"main-content\">\n                <view class=\"question-bottom-inner\">\n                    <view class=\"question-item\" v-for=\"(finishQ, finishQindex) in taskState.finishQList\"\n                        :key=\"finishQindex\">\n                        <view class=\"question-title\">\n                            题目来源\n                        </view>\n                        <view class=\"question-content\">\n                            完成标准\n                        </view>\n                        <view class=\"question-title\">\n                            题目\n                        </view>\n                        <view class=\"question-content\">\n                            <view v-html=\"formatText(finishQ.examQuestion)\"></view>\n                            <u-radio-group wrap v-model=\"taskState.questionRef[\n            `finishQ${String(finishQ.questionId)\n            }`\n        ]\">\n                                <u-radio v-for=\"(item, index) in finishQ.examOption.split(/[;,]/).filter(item => item.trim() !== '')\"\n                                    :name=\"item.charAt(0)\" :key=\"index\">\n                                    {{ item }}\n                                </u-radio>\n                            </u-radio-group>\n                        </view>\n                    </view>\n                    <view class=\"question-item\" v-for=\"(sopQ, sopQindex) in taskState.sopQList\" :key=\"finishQindex\">\n                        <view class=\"question-title\">\n                            题目来源\n                        </view>\n                        <view class=\"question-content\">\n                            SOP\n                        </view>\n                        <view class=\"question-title\">\n                            题目\n                        </view>\n                        <view class=\"question-content\">\n                            <view v-html=\"formatText(sopQ.examQuestion)\"></view>\n                            <u-radio-group wrap v-model=\"taskState.questionRef[\n            `sopQ${String(sopQ.questionId)\n            }`\n        ]\">\n                                <u-radio v-for=\"(item, index) in sopQ.examOption.split(/[;,]/).filter(item => item.trim() !== '')\"\n                                    :name=\"item.charAt(0)\" :key=\"index\">\n                                    {{ item }}\n                                </u-radio>\n                            </u-radio-group>\n                        </view>\n                    </view>\n                </view>\n            </view>\n            <!-- <view class=\"main-content\">\n\n          <view class=\"question-item\" v-for=\"(item, questionIndex) in taskState.questionList\" :key=\"questionIndex\" :class=\"{ show: questionIndex === taskState.current }\">\n            <view class=\"question-top-main\">\n              <span class=\"question-title\">问题现象</span>\n              <view class=\"h1-title top-text-15\">现象发现方</view>\n              <view class=\"h2-title\">{{ item.discoveredBy }}</view>\n              <view class=\"h1-title top-text-15\">具体现象</view>\n              <view class=\"h2-title\">{{ item.phenomenon }}</view>\n              <view class=\"h1-title top-text-15\">导致结果</view>\n              <view class=\"h2-title\">{{ item.result }}</view>\n              <view class=\"question-bottom top-text-15\" v-for=\"(item, index) in item.reasonResolveSopList \" :key=\"index\">\n                <view class=\"question-bottom-inner\">\n                  <view class=\"question-bottom-title\">可能原因</view>\n                  <view class=\"h1-title top-text-8\">原因发现方</view>\n                  <view class=\"h2-title\" v-html=\"formatText(item.reason.phenomenonReason)\" />\n                  <view v-if=\"item.reason.phenomenonReasonOptionList\" class=\"question-option-body\">\n                    <u-radio-group wrap v-model=\"taskState.questionRef[`reason${index}phenomenonReason${questionIndex}`]\">\n                      <u-radio v-for=\"(item, index) in item.reason.phenomenonReasonOptionList\" :name=\"item.charAt(0)\" :key=\"index\">\n                        {{ item }}\n                      </u-radio>\n                    </u-radio-group>\n                  </view>\n                  <view class=\"h1-title top-text-8\">可能原因</view>\n                  <view class=\"h2-title\" v-html=\"formatText(item.reason.possibleReason)\"></view>\n                  <view v-if=\"item.reason.possibleReasonOptionList\" class=\"question-option-body\">\n                    <u-radio-group wrap v-model=\"taskState.questionRef[`reason${index}possibleReason${questionIndex}`]\">\n                      <u-radio v-for=\"(item, index) in item.reason.possibleReasonOptionList\" :name=\"item.charAt(0)\" :key=\"index\">\n                        {{ item }}\n                      </u-radio>\n                    </u-radio-group>\n                  </view>\n                  <view class=\"h1-title top-text-8\">原因特征</view>\n                  <view class=\"h2-title\" v-html=\"formatText(item.reason.reasonFeature)\"></view>\n                  <view v-if=\"item.reason.reasonFeatureOptionList\" class=\"question-option-body\">\n                    <u-radio-group wrap v-model=\"taskState.questionRef[`reason${index}reasonFeature${questionIndex}`]\">\n                      <u-radio v-for=\"(item, index) in item.reason.reasonFeatureOptionList\" :name=\"item.charAt(0)\" :key=\"index\">\n                        {{ item }}\n                      </u-radio>\n                    </u-radio-group>\n                  </view>\n                  <view class=\"question-bottom-title-bottom\">解决SOP和标准动作</view>\n                  <view class=\"h1-title top-text-8\">执行目标</view>\n                  <view class=\"h2-title\" v-html=\"formatText(item.resolveSop.executionTarget)\" />\n                  <view v-if=\"item.resolveSop.executionTargetOptionList\" class=\"question-option-body\">\n                    <u-radio-group wrap v-model=\"taskState.questionRef[`resolveSop${index}executionTarget${questionIndex}`]\">\n                      <u-radio v-for=\"(item, index) in item.resolveSop.executionTargetOptionList\" :name=\"item.charAt(0)\" :key=\"index\">\n                        {{ item }}\n                      </u-radio>\n                    </u-radio-group>\n                  </view>\n                  <view class=\"h1-title top-text-8\">执行方案</view>\n                  <view class=\"h2-title\" v-html=\"formatText(item.resolveSop.plan)\"></view>\n                  <view v-if=\"item.resolveSop.planOptionList\" class=\"question-option-body\">\n                    <u-radio-group wrap v-model=\"taskState.questionRef[`resolveSop${index}plan${questionIndex}`]\">\n                      <u-radio v-for=\"(item, index) in item.resolveSop.planOptionList\" :name=\"item.charAt(0)\" :key=\"index\">\n                        {{ item }}\n                      </u-radio>\n                    </u-radio-group>\n                  </view>\n                  <view class=\"h1-title top-text-8\">达成标准</view>\n                  <view class=\"h2-title\" v-html=\"formatText(item.resolveSop.reachStandard)\"></view>\n                  <view v-if=\"item.resolveSop.reachStandardOptionList\" class=\"question-option-body\">\n                    <u-radio-group wrap v-model=\"taskState.questionRef[`resolveSop${index}reachStandard${questionIndex}`]\">\n                      <u-radio v-for=\"(item, index) in item.resolveSop.reachStandardOptionList\" :name=\"item.charAt(0)\" :key=\"index\">\n                        {{ item }}\n                      </u-radio>\n                    </u-radio-group>\n                  </view>\n                </view>\n              </view>\n            </view>\n          </view>\n        </view> -->\n\n            <view class=\"fixed-button\" @click=\"handleSubmit(taskState.taskId)\">\n                <view class=\"btn-father\">\n                    交卷\n                    <view class=\"btn-tip\"><span class=\"count\">考试不通过{{ taskState.examFailNumber }}次</span></view>\n                </view>\n            </view>\n        </view>\n        <u-modal v-model=\"taskState.show\" show-cancel-button @confirm=\"handleConfirmSubmit\">\n            <view class=\"sub-tip\">\n                <view class=\"sub-icon\"><u-icon name=\"info-circle-fill\" color=\"#F7B500\" size=\"24px\"></u-icon></view>\n                <view class=\"sub-title\"> 确认提交吗</view>\n            </view>\n        </u-modal>",
      });
  
  
  
    // ============================ 属性定义 ============================
  
    // ---------------------------- 元素数据引用 ----------------------------
    // 组件 自定义模板_f8ubxtpyu8 ref 的引用
    const vid_3v8qyxf52i_ref = ref(null);
    // 动态key的map
    const fieldTypeMap = {};
    // 动态key的map
    const refMap = {vid_3v8qyxf52i_ref};
  
    const showState = reactive({
        vid_3v8qyxf52i_visible: true,
    })
    // ============================ 元素数据引用 ============================
  
    // ---------------------------- 数据 ----------------------------
  
  
    // ============================ 数据 ============================
  
    // ---------------------------- 方法 ----------------------------
    // ---------------------------- 页面数据 ----------------------------
  
  
    // ============================ 页面数据 ============================
  
    // ---------------------------- 响应 ----------------------------
  
    // ============================ 响应 ============================
  
    // ---------------------------- 函数 ----------------------------
  
    // 自定义函数 返回上一页
    const customFunction_goBack_rvuc19nhjw =  (...params) => {
      uni.navigateBack()
    }
  
    // ============================ 函数 ============================
  
    // ---------------------------- 页面参数 ----------------------------
  
    const pageParameter_state = reactive({
        'processInstanceId': undefined,
    })
  
    // ============================ 页面参数 ============================
  
    // ---------------------------- 组件事件处理方法 ----------------------------
  
  
    // ============================ 组件事件处理方法 ============================
  
    // ============================ 方法 ============================
  
    // ---------------------------- 生命周期 ----------------------------
    /*** UNI_APP_EXEGESIS ***
        // 获取上一层传递的数据
        const workflowChannel = new BroadcastMessage('WORKFLOW');
        workflowChannel.publish({ status: 'Ready' });
        workflowChannel.subscribe((data) => {
          if (data) {
            isProcessState.value = (window.self !== window.parent && data.type === 'hideHeader');
          }
        });
        *** UNI_APP_EXEGESIS ***/
  
  
    const pageScrollTop = ref(0)
  
    // *** PREVIEW_EXEGESIS ***
    onMounted(() => {
      setPageParams(route.query)
      // 设置表单的rule
      try{
  
      }catch{
          // do nothing
      }
    });
    // *** PREVIEW_EXEGESIS *** //
  
    /*** UNI_APP_EXEGESIS ***
    const routeOption = ref({})
    onLoad((option) => {
      routeOption.value = option;
    });
    onReady(() => {
      setPageParams(routeOption.value)
      // 设置表单的rule
      try{
  
      }catch{
          // do nothing
      }
    });
    // 图表刷新标记
    const uChartsReshowFlag = ref(false);
    onHide(() => { // 页面隐藏后标记置为false(如果不置为false无法触发图表更新)
        uChartsReshowFlag.value = false
    })
    onShow(() => {
        uChartsReshowFlag.value = true; // 页面激活后,标记置为true
  
        setPageParams(routeOption.value)
    })
    onPageScroll(e => {
        pageScrollTop.value = e.scrollTop
    });
    *** UNI_APP_EXEGESIS ***/
  
    const setPageParams = (routerParam)=>{
      const pageParams = [{"dataType":"STRING","dependencies":[],"name":"processInstanceId"}];
      const strategyMap = {
        STRING: (param, paramValue) => {
          pageParameter_state[param.name] = paramValue;
        },
        BOOLEAN: (param, paramValue) => {
          if('true' === (paramValue || '').toLowerCase()) {
            pageParameter_state[param.name] = true
          } else if('false' === (paramValue || '').toLowerCase()) {
            pageParameter_state[param.name] = false
          } else {
            // TODO: 是否要支持toast
            console.error('参数传入错误！类型不匹配！');
          }
        },
        NUMBER: (param, paramValue) => {
          if (!isNaN(paramValue)) {
            pageParameter_state[param.name] = Number(paramValue);
          } else {
            // TODO: 是否要支持toast
            console.error('参数传入错误！类型不匹配！');
          }
        },
        ARRAY: (param, paramValue) => {
          if (isNullOrUnDef(paramValue) || !paramValue || paramValue=== 'undefined') { // default value
            pageParameter_state[param.name] = [];
          } else if(paramValue.trim().startsWith('[') && paramValue.trim().endsWith(']')) {
            try {
              pageParameter_state[param.name] = JSON.parse(decodeURI(paramValue));
            } catch (error) {
              console.error('参数解析失败 ',error);
            }
          } else {
            console.error('参数传入错误！类型不匹配！');
          }
        },
      };
      pageParams.forEach((param) => {
        strategyMap[param.dataType](param, routerParam[param.name])
      });
  
  
    }
  
    onUnmounted(() => {
      // 销毁定时器
      setTimeOutList.forEach(({ repeat, timer }) => {
        repeat ?  clearInterval(timer): clearTimeout(timer);
      });
    });
  
  
    /*** UNI_APP_EXEGESIS ***
    onPullDownRefresh(() => {
      // 下拉刷新
      setTimeout(() => {
          uni.stopPullDownRefresh()
      }, 1000)
    })
    *** UNI_APP_EXEGESIS ***/
  
    // ============================ 生命周期 ============================
  
    // ---------------------------- 数据关联处理 ----------------------------
    // ---------------------------- 组件数据同步 ----------------------------
  
    // ============================ 组件数据同步 ============================
    //
    // ============================ 数据关联处理 ============================
  
    // ---------------------- 不同组件自定义的处理逻辑 ---------------------
  
    // ====================== 不同组件自定义的处理逻辑 ======================
  
  
    // ================================定制化逻辑========================================
    onMounted(() => {
        let appDiv = document.querySelector('#app')
        appDiv.style.background = 'linear-gradient(180deg, #E1EFFD 100%, #ffffff 0%)';
        let topHeader = document.querySelector('.uni-page-head');
        if (topHeader) topHeader.remove()
        let bottomTab = document.querySelector('.vid_dur3o27gyj')
        if (bottomTab) bottomTab.remove()
        // 获取当前 URL 中问号后的参数部分
        const queryString = window.location.search
  
        // 使用 URLSearchParams 解析参数字符串
        const urlParams = new URLSearchParams(queryString)
  
        // 遍历参数并输出
        urlParams.forEach((value, key) => {
        })
        const taskId = urlParams.get('id')
        taskState.taskId = taskId
        // 获取任务详情
        get(`/solution-ppm/api/v2/built-in-system-ppm/dashboard/task/${taskId}`).then(({ data }) => {
            taskState.examFailNumber = data?.examFailNumber || 0
            handleGetQuestionList()
        })
    })
    const taskState = reactive({
        show: false,
        isExam: false,
        taskId: '',
        questionList: [],
        tabList: [],
        current: 0,
        showData: {
        },
        sopQList: [],
        finishQList: [],
        examFailNumber: 0,
        loadingShow: false,
        questionRef: {},
    })
  
    function tabChange(index) {
        taskState.current = index;
    }
    const formatText = (text) => {
        // 这里放置文本格式化的逻辑
        return text?.replace(/\n/g, '<br>');
    };
    const reg = /(?<={).*?(?=})/g;
    function handleGetQuestionList() {
        post(`/solution-ppm/api/v2/built-in-system-ppm/task/faq/exmainee/search`, { taskId: taskState.taskId }).then(
            res => {
                taskState.sopQList = res.data.taskQuestionSopList
                taskState.finishQList = res.data.taskQuestionFinishStandardList
                // 完成标准
                taskState.finishQList.forEach((finishQ, finishQindex) => {
                    const arr = finishQ.examQuestion.match(/\{\}/g); // 匹配空的{}
                    if (arr) {
                        arr.forEach((match, i) => {
                            const replacedQuestion = finishQ.examQuestion.replace(
                                match,
                                `<div id="finishQ${String(finishQindex)}" contenteditable style="font-weight:600;border-bottom: 1px solid #9c9c9c;display:inline-block;min-width:25px;outline: none"></div>`
                            );
                            taskState.finishQList[finishQindex].examQuestion = replacedQuestion;
                        });
                    }
                });
                //SOP
                taskState.sopQList.forEach((sopQ, sopQindex) => {
                    const arr = sopQ.examQuestion.match(/\{\}/g); // 匹配空的{}
                    if (arr) {
                        arr.forEach((match, i) => {
                            const replacedQuestion = sopQ.examQuestion.replace(
                                match,
                                `<div id="finishQ${String(sopQindex)}" contenteditable style="font-weight:600;border-bottom: 1px solid #9c9c9c;display:inline-block;min-width:25px;outline: none"></div>`
                            );
                            taskState.sopQList[sopQindex].examQuestion = replacedQuestion;
                        });
                    }
                });
  
  
            })
    }
  
    function handleSubmit() {
        taskState.show = true
  
    }
  
    function handleConfirmSubmit() {
  
        // 交卷
        const taskQuestionList = []
  
    for (const key in taskState.questionRef) {
      const questionId = parseInt(key.match(/\d+/)[0]); // 提取数字部分作为questionId
      const newItem = {
        questionId: questionId,
        answers: taskState.questionRef[key]
      };
      taskQuestionList.push(newItem);
    }
    console.log(taskState.questionRef,'taskState.questionRef')
    console.log(taskQuestionList,'taskQuestionList.taskQuestionList')
    put('/solution-ppm/api/v2/built-in-system-ppm/task/faq/exmainee',{taskId:taskState.taskId,taskQuestionList:taskQuestionList}).then(res=>{
        if (res.code === 200) {
                if (res.data.taskExamStatus === '已通过') {
                    uni.showToast({
                        title: '考试通过，请及时完成任务',
                        icon: 'success'
                    });
                    handleRedirect(`/pages/Page3000000251/Page3000000251`)
                    taskState.loadingShow = false
                } else {
                    uni.showToast({
                        title: '考试不通过请重新开始学习',
                        icon: 'error'
                    });
                    taskState.loadingShow = false
                    handleRedirect(`/pages/Page3000000331/Page3000000331?id=${taskState.taskId}`)
                }
            } else {
                uni.showToast({
                    title: res.message,
                    icon: 'error'
                });
                taskState.loadingShow = false
            }
    })
  
    }
  
    function handle1Change(e, index) {
        console.log(e, index);
    }
  </script>
  <style lang="less" scoped>
    .page_root {
        min-height: 100%;
        box-sizing: border-box;
    }
  
  
    .page_root {
        min-height: 100%;
        box-sizing: border-box;
    }
  
  
    .page_root {
        min-height: 100%;
        box-sizing: border-box;
    }
  
    .page_root {
        min-height: 100%;
        box-sizing: border-box;
        background: linear-gradient(180deg, #E1EFFD 100%, #ffffff 0%);
    }
  
    .main {
        height: calc(100vh - 50px);
        background: linear-gradient(180deg, #E1EFFD 100%, #ffffff 0%);
        padding: 15px 15px 0 15px;
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        position: relative;
        overflow: auto;
        padding: 15px;
    }
  
    .bgc-img {
        position: absolute;
        width: 100%;
        height: 300px;
        left: 0;
        top: -230px;
        background-image: url('http://10.40.0.33:9001/file-storage/416680575854426112.png');
        background-size: cover;
    }
  
    .top-tip {
        background: #FFFBE6;
        border: 1px solid #FFE58F;
        border-radius: 2px;
        display: flex;
        width: 100%;
        height: 40px;
        position: relative;
        padding: 8px 10px;
    }
  
  
  
    .top-icon {
        width: 10%;
    }
  
    .top-content {
        height: 24px;
        flex: 1;
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #262626;
        letter-spacing: 0;
        text-align: justify;
        font-weight: 400;
        line-height: 24px;
    }
  
    .main-content {
        overflow: hidden;
        margin-top: 15px;
        border-radius: 6px 6px 0 0;
    }
  
    .tabs {
        width: 100%;
        display: flex;
        margin-top: 15px;
        position: relative;
        box-shadow: 0 0 10px 0 #CFE7FF;
        background: #FFFFFF;
        border-radius: 6px 6px 0 0;
        height: 50px;
        padding: 12px 16px;
        overflow-x: auto;
        /* 添加水平滚动 */
        white-space: nowrap;
        /* 防止换行 */
    }
  
    .tabs-item {
        position: relative;
        width: 25%;
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #595959;
        font-weight: 400;
        height: 20px;
        line-height: 30px;
        font-weight: 600;
        text-align: center;
        margin-right: 10px;
    }
  
    .indicator {
        top: 25px;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 50%;
        /* Adjust the width of the indicator according to your design */
        height: 1px;
        /* Adjust the height of the indicator according to your design */
        background-color: #0078FF;
        display: none;
        /* Initially hide the indicator */
        border: 1px solid #0078FF;
    }
  
    .active .indicator {
        display: block;
        /* Display the indicator when tabs-item has active class */
    }
  
    .active {
        font-family: PingFangSC-Medium;
        font-size: 14px;
        color: #0078FF;
        font-weight: 600;
    }
  
    .question-item {
        background: #FFFFFF;
        border-radius: 6px 6px 0 0;
        padding: 5px 15px 5px 15px;
        border-bottom: 1px solid #A6C2E4;
    }
  
  
    .question-title {
        font-family: PingFangSC-Semibold;
        font-size: 16px;
        color: #008BFF;
        font-weight: 600;
        margin: 5px 0;
    }
  
    .question-top-main {
        line-height: 22px;
    }
  
    .question-item-icon {
        position: relative;
        top: 2px;
    }
  
    .top-text-15 {
        margin-top: 15px;
    }
  
    .top-text-12 {
        margin-top: 12px;
    }
  
    .top-text-16 {
        margin-top: 16px;
    }
  
    .top-text-8 {
        margin-top: 8px;
    }
  
    .h1-title {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #008BFF;
        font-weight: 400;
    }
  
    .question-bottom {
        background: #FFFFFF;
        box-shadow: 0 0 10px 0 #CFE7FF;
        border-radius: 3px;
        overflow: hidden;
    }
  
    .question-bottom-inner {
        border: 3px solid;
        border-image: linear-gradient(360deg, rgba(41, 129, 223, 0) 0%, rgba(41, 129, 223, 1) 100%) 3 3 3 3;
        height: 100%;
    }
  
    .question-bottom-title {
        position: relative;
        ;
        left: -16px;
        width: 100%;
        height: 28px;
        background-image: linear-gradient(90deg, #CDE8FD 0%, rgba(205, 232, 253, 0.00) 100%);
        font-family: PingFangSC-Semibold;
        font-size: 14px;
        color: #262626;
        font-weight: 600;
        line-height: 28px;
        padding: 0 14px;
    }
  
    .question-bottom-title-bottom {
        position: relative;
        ;
        left: -16px;
        width: 100%;
        height: 28px;
        background-image: linear-gradient(90deg, #CDE8FD 0%, rgba(205, 232, 253, 0.00) 100%);
        font-family: PingFangSC-Semibold;
        font-size: 14px;
        color: #262626;
        font-weight: 600;
        line-height: 28px;
        padding: 0 14px;
        margin-bottom: 20px;
        top: 20px;
    }
  
    .fixed-button {
        position: fixed;
        height: 52px;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: #1777FF;
        color: #fff;
        font-size: 20px;
        font-weight: 600;
        text-align: center;
        border: none;
        border-radius: 0;
        z-index: 12;
        line-height: 52px;
        font-family: PingFangSC-Semibold;
        font-size: 20px;
        color: #FFFFFF;
        letter-spacing: 0;
        font-weight: 600;
    }
  
    .btn-tip {
        background: #FFFFFF;
        border-radius: 10px 10px 10px 0;
        width: 90px;
        height: 18px;
        position: absolute;
        top: 5px;
        right: -90px;
        display: flex;
        /* 添加 flex 属性 */
        justify-content: center;
        /* 水平居中 */
        align-items: center;
        /* 垂直居中 */
    }
  
    .count {
        display: inline-block;
        font-family: PingFangSC-Regular;
        font-size: 12px;
        color: #F5222D;
        text-align: center;
        /* 将 text-align 属性修改为 center */
        font-weight: 400;
    }
  
  
    .btn-father {
        margin: 0 auto;
        width: 40px;
        position: relative;
    }
  
    .show {
        display: block;
    }
  
    .question-option-body {
        margin: 8px 0;
    }
  
    .question-optionp-item {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #262626;
        text-align: justify;
        font-weight: 400;
    }
  
    .sub-tip {
        margin-bottom: 10px;
        display: flex;
        padding: 0 15px;
    }
  
    .sub-icon {
        height: 24px;
        line-height: 24px;
        width: 10%;
    }
  
    .sub-title {
        height: 24px;
        font-size: 16px;
        line-height: 24px;
        flex: 1;
    }
  
    /*
        新faq样式2
        */
    .question-content {
        font-family: PingFangSC-Medium;
        font-size: 14px;
        color: #262626;
        font-weight: 500;
        text-align: left;
    }
  </style>
  